import React, { Component } from 'react';
import { routerRedux, Route, Switch, Link } from 'dva/router';
import SublimeVideo from 'react-sublime-video';
import { Player } from 'video-react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button, Menu, Dropdown, Icon, Row, Col,
  Input, InputNumber,
  Steps, Card, Popover, Badge, Table, Tooltip, Divider,
  Checkbox, Modal, Radio,
  Select, message,
  Form, Upload, Spin, DatePicker
} from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import { getRoutes } from '../../utils/utils';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ApplyProfile.less';
import { create } from 'domain';
import yes from '../../assets/yes.png';
import no from '../../assets/no.png';
import querystring from 'querystring';

const Source = SublimeVideo.Source;


const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;


const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);


@connect(({ pendingTask }) => ({
  pendingTask,
}))
@Form.create()
export default class ApplyDetails1 extends Component {
  state = {
    id: '',
    taskId: '',
    custMessgeId: '',
    reviewState: '',
    stepDirection: 'horizontal',
    modalVisible: false,
    phoneReviewTow: false,
    videoVisible: false,
    submitting: false,
    previewVisible: false,
    previewImage: '',
    dispatchOne: false,
    dispatchTwo: false,
    identityValueStart: null,
    identityValueEnd: '',
    homeAddRessValueStart: '',
    homeAddRessValueEnd: '',
    applyValueStart: '',
    applyValuEnd: '',
    approvalValueStart: '',
    approvalValueEnd: '',
    repayValue: null,
    willVerify: '',
    verifyOpinion: '',
    visitsNote: '',
    creditValue: '',
    addRessValue: '',
    homeWorkValue: '',
    conclusionValue: '',
    returnVisitDate: '',
    returnVisitTime: '',
    phonePeople: '',
    idCardValue: '',
    custTaskListLoading: false,
    profileState: false,
    houseState: '',
    custList: {},
    fileList: {
      idcardVerify: [],
      addressVerify: [],
      tableVerify: [],
      signVerify: [],
      signVerifyVideo: [],
    },

    imageRotateDeg: 0,
    enlarge: 1,
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
    });
    dispatch({
      type: 'pendingTask/fetchApplyProfile',
      payload: {
        id: params.id,
      },
      callback: () => {
        const { pendingTask: { custMessgeList, custTaskList, custAuditList, custListLoading } } = this.props;
        this.setState({
          custList: custMessgeList,
          custMessgeId: custMessgeList.id,//申请ID
          taskId: custTaskList.id,
        })
        if (custTaskList.taskName == "初审") {
          this.setState({
            reviewState: 1,
            dispatchdOne: false
          })
        } else if (custTaskList.taskName == "复审") {
          this.setState({
            reviewState: 2,
            dispatchOne: true,
            dispatchTwo: false
          })
        } else if (custTaskList.taskName == "终审") {
          this.setState({
            reviewState: 3,
            dispatchOne: true,
            dispatchTwo: true,
          })
        }
        if(custTaskList.taskName !== "初审"){
          this.setState({
            phoneReviewTow: true,
          })
        }
        dispatch({
          type: 'pendingTask/customPhoneShow',
          payload: {
            id: custMessgeList.id
          },
          callback: () => {
            const { pendingTask: { customList } } = this.props;
            // console.log("customList",customList)
            customList.phoneVisits &&
              this.setState({
                phonePeople: customList.phoneVisits.visitor,
                returnVisitTime: customList.phoneVisits.visitTime,
                creditValue: customList.phoneVisits.loanVerify,
                addRessValue: customList.phoneVisits.homeVerify,
                homeWorkValue: customList.phoneVisits.workVerify,
                idCardValue: customList.phoneVisits.docVerify,
                conclusionValue: customList.phoneVisits.note,
              })
          }
        });

        if (custMessgeList.id != null) {
          dispatch({
            type: 'pendingTask/queryCustomer',
            payload: {
              id: custMessgeList.id,
            },
            callback: () => {
              const { pendingTask: { custMessgeList, idcardVerifyList, custListLoading } } = this.props;
             
              this.setState({
                repayValue: idcardVerifyList.willVerify.homeVisits,
                verifyOpinion: idcardVerifyList.willVerify.visitsNote,
              })
              if (this.state.reviewState == 3 || this.state.reviewState == 2) {
                this.setState({
                  identityValueStart: idcardVerifyList.idcardVerify.audit1,
                  homeAddRessValueStart: idcardVerifyList.addressVerify.audit1,
                  applyValueStart: idcardVerifyList.tableVerify.audit1,
                  approvalValueStart: idcardVerifyList.signVerify.audit1,
                  willVerify: idcardVerifyList.willVerify.audit2,
                  identityValueEnd: idcardVerifyList.idcardVerify.audit2,
                  homeAddRessValueEnd: idcardVerifyList.addressVerify.audit2,
                  applyValueEnd: idcardVerifyList.tableVerify.audit2,
                  approvalValueEnd: idcardVerifyList.signVerify.audit2,
                })
              }
              if (this.state.reviewState == 1) {
                this.setState({
                  identityValueStart: idcardVerifyList.idcardVerify.audit1,
                  homeAddRessValueStart: idcardVerifyList.addressVerify.audit1,
                  applyValueStart: idcardVerifyList.tableVerify.audit1,
                  approvalValueStart: idcardVerifyList.signVerify.audit1,
                })
              }
              if (idcardVerifyList.addressVerify.houseState == 1) {
                this.setState({
                  houseState: '自有住房'
                })
              } else if (idcardVerifyList.addressVerify.houseState == 2) {
                this.setState({
                  houseState: '分期付款购房'
                })
              } else if (idcardVerifyList.addressVerify.houseState == 3) {
                this.setState({
                  houseState: '租房'
                })
              } else if (idcardVerifyList.addressVerify.houseState == 4) {
                this.setState({
                  houseState: '其他'
                })
              } else if (idcardVerifyList.addressVerify.houseState == 5) {
                this.setState({
                  houseState: '集体宿舍'
                })
              } else if (idcardVerifyList.addressVerify.houseState == 6) {
                this.setState({
                  houseState: '单位分配'
                })
              }
              let idcardFileList = this.state.fileList;
              let idcardVerifyFileList = idcardVerifyList;
              if (idcardVerifyFileList.idcardVerify.images.length > 0) {
                for (let i = 0; i < idcardVerifyFileList.idcardVerify.images.length; i++) {
                  idcardFileList.idcardVerify.push({
                    uid: idcardVerifyFileList.idcardVerify.images[i],
                    name: 'xxx.png',
                    status: 'done',
                    url: idcardVerifyFileList.idcardVerify.images[i],
                  })
                }
              }

              if (idcardVerifyFileList.addressVerify.images.length > 0) {
                for (let i = 0; i < idcardVerifyFileList.addressVerify.images.length; i++) {
                  idcardFileList.addressVerify.push({
                    uid: idcardVerifyFileList.addressVerify.images[i],
                    name: 'xxx.png',
                    status: 'done',
                    url: idcardVerifyFileList.addressVerify.images[i],
                  })
                }
              }

              if (idcardVerifyFileList.tableVerify.images.length > 0) {
                for (let i = 0; i < idcardVerifyFileList.tableVerify.images.length; i++) {
                  idcardFileList.tableVerify.push({
                    uid: idcardVerifyFileList.tableVerify.images[i],
                    name: 'xxx.png',
                    status: 'done',
                    url: idcardVerifyFileList.tableVerify.images[i],
                  })
                }
              }
              if (idcardVerifyFileList.signVerify.images.length > 0) {
                for (let i = 0; i < idcardVerifyFileList.signVerify.images.length; i++) {
                  idcardFileList.signVerify.push({
                    uid: idcardVerifyFileList.signVerify.images[i],
                    name: 'xxx.png',
                    status: 'done',
                    url: idcardVerifyFileList.signVerify.images[i],
                  })
                }
              }
              // console.log("idcardVerifyFileList",idcardVerifyFileList.signVerify)
              if (idcardVerifyFileList.signVerify.videos.length > 0) {
                for (let i = 0; i < idcardVerifyFileList.signVerify.videos.length; i++) {
                  idcardFileList.signVerifyVideo.push({
                    uid: idcardVerifyFileList.signVerify.videos[i],

                    url: idcardVerifyFileList.signVerify.videos[i],
                  })
                }
              }
              this.setState({
                fileList: idcardFileList,
                custList: custMessgeList,
              })
            }
          });
        }
      }
    })

    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  // componentWillUnmount() {
  //   window.removeEventListener('resize', this.setStepDirection);
  //   this.setStepDirection.cancel();
  // }

  handleClickSubmit = () => {
    if (this.state.reviewState == 1) {
      this.props.dispatch({
        type: 'pendingTask/commitCustomer',
        payload: {
          taskId: this.state.taskId,
          idcardVerify: this.state.identityValueStart,
          addressVerify: this.state.homeAddRessValueStart,
          tableVerify: this.state.applyValueStart,
          willVerifyType: this.state.repayValue,
          willContent: this.state.verifyOpinion,
          signVerify: this.state.approvalValueStart
        },
        callback: () => {
          const { pendingTask: { custTaskListLoading, auditStatusList } } = this.props;
          this.setState({
            custTaskListLoading: custTaskListLoading
          })
          const newAuditStatusList = [...auditStatusList];
          newAuditStatusList[0] = true;
          this.props.dispatch({
            type: 'pendingTask/changeApplyDetailsState1',
            payload: newAuditStatusList,
          })
        }
      })
    }
    if (this.state.reviewState == 2) {
      this.props.dispatch({
        type: 'pendingTask/commitCustomer',
        payload: {
          taskId: this.state.taskId,
          idcardVerify: this.state.identityValueEnd,
          addressVerify: this.state.homeAddRessValueEnd,
          tableVerify: this.state.applyValueEnd,
          willVerify: this.state.willVerify,
          willVerifyType: this.state.repayValue,
          willContent: this.state.verifyOpinion,
          signVerify: this.state.approvalValueEnd
        },
        callback: () => {

          const { pendingTask: { custTaskListLoading, auditStatusList } } = this.props;
          this.setState({
            custTaskListLoading: custTaskListLoading
          })
          const newAuditStatusList = [...auditStatusList];
          newAuditStatusList[0] = true;
          this.props.dispatch({
            type: 'pendingTask/changeApplyDetailsState1',
            payload: newAuditStatusList,
          })
        }
      })
    }
  }

  handleCancel = () => this.setState({ previewVisible: false, enlarge: 1 })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
      imageRotateDeg: 0,
    });
  }

  handleIdentityValueStart = (e) => {
    this.setState({
      identityValueStart: e.target.value
    })
  }
  handleIdentityValueEnd = (e) => {
    this.setState({
      identityValueEnd: e.target.value
    })
  }
  handleHoneAddRessValueStart = (e) => {
    this.setState({
      homeAddRessValueStart: e.target.value
    })
  }
  handleHoneAddRessValueEnd = (e) => {
    this.setState({
      homeAddRessValueEnd: e.target.value
    })
  }

  handleApplyValueStart = (e) => {
    this.setState({
      applyValueStart: e.target.value
    })
  }
  handleApplyValueEnd = (e) => {
    this.setState({
      applyValueEnd: e.target.value
    })
  }

  handleApprovalValueStart = (e) => {
    this.setState({
      approvalValueStart: e.target.value
    })
  }
  handleApprovalValueEnd = (e) => {
    this.setState({
      approvalValueEnd: e.target.value
    })
  }

  handleRepayValue = (e) => {
    if (this.state.reviewState == 1) {
      this.setState({
        repayValue: e.target.value
      })
    }
  }
  handleVerifyOpinion = (e) => {
    if (this.state.reviewState == 1) {
      this.setState({
        verifyOpinion: e.target.value
      })
    }
  }
  handleWillVerify = (e) => {
    this.setState({
      willVerify: e.target.value
    })
  }

  handleRotate = () => {
    this.setState({
      imageRotateDeg: this.state.imageRotateDeg + 90,
    });
  }
  handleAmplification = () => {
    if (this.state.enlarge >= 2) {
      message.warning("不能再放大了")
    } else {
      this.setState({
        enlarge: this.state.enlarge * 2,
      })
    }
  }
  handleNarrow = () => {
    if (this.state.enlarge <= 1) {
      message.warning("不能再缩小了")
    } else {
      this.setState({
        enlarge: this.state.enlarge * 0.5,
      })
    }
  }
  handlePhoneShow = () => {
    this.setState({
      modalVisible: true
    })
  }
  submitPhoneAccess = () => {
    if(this.state.reviewState == 1 ){
      if (this.state.returnVisitTime
        && this.state.creditValue && this.state.addRessValue
        && this.state.homeWorkValue && this.state.idCardValue
        && this.state.conclusionValue) {
        let returnVisitPerson = sessionStorage.getItem("name")
        this.props.dispatch({
          type: 'pendingTask/savePhoneAccess',
          payload: {
            applyId: this.state.custMessgeId,
            // visitDate: this.state.returnVisitDate,
            visitTime: this.state.returnVisitTime,
            visitor: returnVisitPerson,
            loanVerify: this.state.creditValue,
            homeVerify: this.state.addRessValue,
            workVerify: this.state.homeWorkValue,
            docVerify: this.state.idCardValue,
            note: this.state.conclusionValue
          },
          callback: () => {
            this.setState({
              modalVisible: false
            })
          }
        })
      } else {
        message.warning("请先填写完毕")
      }
    }else{
      this.setState({
        modalVisible: false
      })
    }
  }
  handlePhoneCancel = () => {
    this.setState({
      modalVisible: false
    })
  }

  handleChangeTime = (value) => {
    this.setState({
      returnVisitTime: value,
    })
  }
  disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }
  onChangeCreditValue = (e) => {
    this.setState({
      creditValue: e.target.value,
    })
  }

  onChangeAddRessValue = (e) => {
    this.setState({
      addRessValue: e.target.value,
    })
  }

  onChangeHomeWorkValue = (e) => {
    this.setState({
      homeWorkValue: e.target.value,
    })
  }

  onChangeIdCardValue = (e) => {
    this.setState({
      idCardValue: e.target.value,
    })
  }

  onChangecConclusionValue = (e) => {
    this.setState({
      conclusionValue: e.target.value,
    })
  }

  handleStartVideo = () => {
    this.setState({
      videoVisible: true
    })
  }

  handleVidoeCancel = () => {
    this.setState({
      videoVisible: false
    })
  }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  renderDescription = () => {
    return (
      this.state.custList &&
      <DescriptionList className={styles.headerList} size="small" col="2">
        <Description term="客户名称">{this.state.custList.custName}</Description>
        <Description term="性别">{this.state.custList.sex == 1 ? '男' : '女'}</Description>
        <Description term="年龄">{this.state.custList.age}</Description>
        <Description term="手机号码">{this.state.custList.mobile}</Description>
        <Description term="证件号">{this.state.custList.idno}</Description>
        <Description term="家庭住址">{this.state.custList.address}</Description>
        <Description term="所购车型">{this.state.custList.carType}</Description>              
        <Description term="贷款金额">{this.state.custList.loanAmount}</Description>
        <Description term="担保公司">{this.state.custList.orgName}</Description>
        <Description term="业务编号">{this.state.custList.bizNum}</Description>
        <Description term="回访人">{this.state.phonePeople}</Description>
        <Description term="支行名称">{this.state.custList.bankName}</Description>   
      </DescriptionList>
    );
  };

  render() {
    const { stepDirection, previewVisible, previewImage, returnVisitTime } = this.state;
    const { pendingTask: { idcardVerifyList, custTaskListLoading, savePhoneLoading } } = this.props;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    const yes1 = (<img alt="" src={yes} />);
    const no1 = (<img alt="" src={no} />);
    const imgWidth = 500 * this.state.enlarge;
    const imgHeight = 500 * this.state.enlarge;
    // const description = this.renderDescription();

    const style = {
      width: 300,
      margin: '0.5%',
      float: 'center',
    };

    return (
      this.state.custTaskListLoading ?
        <Spin size="large" />
        :
        <Row >
          <Col span={21} style={{ border: 1 }}>
            <Card
              title="身份证验证"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Row>
                <DescriptionList className={styles.headerList} size="small" col="2">
                  <Description term="客户名称">{idcardVerifyList.idcardVerify && idcardVerifyList.idcardVerify.custName}</Description>
                  <Description term="证件号">{idcardVerifyList.idcardVerify && idcardVerifyList.idcardVerify.idno}</Description>
                </DescriptionList>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="middle" col="1">
                  <Description term="身份证照">
                    <Upload
                      listType="picture-card"
                      fileList={this.state.fileList.idcardVerify}
                      onPreview={this.handlePreview}
                      showUploadList={{ showRemoveIcon: false }}
                    >
                    </Upload>
                  </Description>
                </DescriptionList>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="初审意见" >
                    <RadioGroup disabled={this.state.dispatchOne} value={this.state.identityValueStart} onChange={this.handleIdentityValueStart}>
                      <Radio value={1}>一致</Radio>
                      <Radio value={2}>不同</Radio>
                    </RadioGroup>
                    {this.state.identityValueStart == 1 ? <img src={yes} /> : null}
                    {this.state.identityValueStart == 2 ? <img src={no} /> : null}
                  </Description>
                </DescriptionList>
              </Row>
              {
                this.state.reviewState == 1 ?
                  null
                  :
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="复审意见">
                        <RadioGroup disabled={this.state.dispatchTwo} value={this.state.identityValueEnd} onChange={this.handleIdentityValueEnd}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.identityValueEnd == 1 ? <img src={yes} /> : null}
                        {this.state.identityValueEnd == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
              }
            </Card>

            <Card
              title="家庭住址验证"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Row>
                <DescriptionList className={styles.headerList} size="small" col="2">
                  <Description term="家庭住址">{idcardVerifyList.addressVerify && idcardVerifyList.addressVerify.address}</Description>
                  <Description term="住宅类型">{this.state.houseState}</Description>
                </DescriptionList>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="家访照片">
                    <div className="clearfix">
                      <Upload
                        listType="picture-card"
                        fileList={this.state.fileList.addressVerify}
                        onPreview={this.handlePreview}
                        showUploadList={{ showRemoveIcon: false }}
                      >
                      </Upload>
                    </div>
                  </Description>
                </DescriptionList>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="初审意见">
                    <RadioGroup disabled={this.state.dispatchOne} value={this.state.homeAddRessValueStart} onChange={this.handleHoneAddRessValueStart}>
                      <Radio value={1}>一致</Radio>
                      <Radio value={2}>不同</Radio>
                    </RadioGroup>
                    {this.state.homeAddRessValueStart == 1 ? <img src={yes} /> : null}
                    {this.state.homeAddRessValueStart == 2 ? <img src={no} /> : null}
                  </Description>
                </DescriptionList>
              </Row>

              {
                this.state.reviewState == 1 ?
                  null
                  :
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="复审意见">
                        <RadioGroup disabled={this.state.dispatchTwo} value={this.state.homeAddRessValueEnd} onChange={this.handleHoneAddRessValueEnd}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.homeAddRessValueEnd == 1 ? <img src={yes} /> : null}
                        {this.state.homeAddRessValueEnd == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
              }
            </Card>

            <Card
              title="申请表审核"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="业务申请表">
                    <div className="clearfix">
                      <Upload
                        listType="picture-card"
                        fileList={this.state.fileList.tableVerify}
                        onPreview={this.handlePreview}
                        showUploadList={{ showRemoveIcon: false }}
                      >
                      </Upload>
                    </div>
                  </Description>
                </DescriptionList>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="初审意见">
                    <RadioGroup disabled={this.state.dispatchOne} value={this.state.applyValueStart} onChange={this.handleApplyValueStart}>
                      <Radio value={1}>一致</Radio>
                      <Radio value={2}>不同</Radio>
                    </RadioGroup>
                    {this.state.applyValueStart == 1 ? <img src={yes} /> : null}
                    {this.state.applyValueStart == 2 ? <img src={no} /> : null}
                  </Description>
                </DescriptionList>
              </Row>
              {
                this.state.reviewState == 1 ?
                  null
                  :
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="复审意见">
                        <RadioGroup disabled={this.state.dispatchTwo} value={this.state.applyValueEnd} onChange={this.handleApplyValueEnd}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.applyValueEnd == 1 ? <img src={yes} /> : null}
                        {this.state.applyValueEnd == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
              }
            </Card>
            <Card
              title="偿债意愿核实"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <span>
                <Row>
                  <RadioGroup value={this.state.repayValue} onChange={this.handleRepayValue}>
                    <Radio value={1}>银行家访</Radio>
                    <Radio value={2}>渠道家访</Radio>
                  </RadioGroup>
                </Row>
                <Row>
                  <span>
                    {
                      this.state.repayValue == 1 ?
                        <Row>
                          <Col span={20}>
                            <TextArea
                              placeholder="家访意见"
                              value={this.state.verifyOpinion}
                              onChange={this.handleVerifyOpinion}
                              style={{
                                marginTop: 15,
                                marginBottom: 15,
                              }}
                              rows={4}
                            />
                          </Col>
                        </Row>
                        :
                        null
                    }
                  </span>
                  <span>
                    {
                      this.state.repayValue == 2 ?
                        <Row style={{
                          marginTop: 30,
                        }}>
                          <Col>
                            <Button
                              type="primary"
                              onClick={this.handlePhoneShow}>
                              电话回访
                              </Button>
                          </Col>
                        </Row>
                        :
                        null
                    }
                  </span>
                </Row>
              </span>
              {
                this.state.reviewState == 1 ? null :
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="复审意见">
                        <RadioGroup disabled={this.state.dispatchTwo} value={this.state.willVerify} onChange={this.handleWillVerify}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.willVerify == 1 ? <img src={yes} /> : null}
                        {this.state.willVerify == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
              }
            </Card>

            <Card
              title="签字核实"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="签字照片">
                    <div className="clearfix">
                      <Upload
                        listType="picture-card"
                        fileList={this.state.fileList.signVerify}
                        onPreview={this.handlePreview}
                        showUploadList={{ showRemoveIcon: false }}
                      >
                      </Upload>
                    </div>
                  </Description>
                </DescriptionList>
              </Row>
              {
                this.state.fileList.signVerifyVideo.length > 0 ?
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="面签视频">
                        <div className="clearfix">
                          <Button onClick={this.handleStartVideo}>播放视频</Button>
                        </div>
                      </Description>
                    </DescriptionList>
                  </Row>
                  :
                  null
              }

              <Row style={{ marginTop: 20 }}>
                <DescriptionList className={styles.headerList} size="small" col="1">
                  <Description term="初审意见">
                    <RadioGroup disabled={this.state.dispatchOne} value={this.state.approvalValueStart} onChange={this.handleApprovalValueStart}>
                      <Radio value={1}>一致</Radio>
                      <Radio value={2}>不同</Radio>
                    </RadioGroup>
                    {this.state.approvalValueStart == 1 ? <img src={yes} /> : null}
                    {this.state.approvalValueStart == 2 ? <img src={no} /> : null}
                  </Description>
                </DescriptionList>
              </Row>
              {
                this.state.reviewState == 1 ?
                  null
                  :
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="复审意见">
                        <RadioGroup disabled={this.state.dispatchTwo} value={this.state.approvalValueEnd} onChange={this.handleApprovalValueEnd}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.approvalValueEnd == 1 ? <img src={yes} /> : null}
                        {this.state.approvalValueEnd == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
              }
              {
                this.state.reviewState == 3 ?
                  null
                  :
                  <p style={{ textAlign: 'left', marginTop: 40 }}>
                    <Button type="primary" onClick={this.handleClickSubmit} loading={this.state.custTaskListLoading}>提交</Button>
                  </p>
              }
            </Card>

          </Col>

          <Modal
            width={imgWidth + 40}
            visible={previewVisible}
            footer={null}
            keyboard={true}
            onCancel={this.handleCancel}>
            <div style={{ justifyContent: 'space-around', display: 'flex' }}>
              <img alt="example"
                style={{
                  width: imgWidth,
                  height: imgHeight,
                  transform: `rotate(${this.state.imageRotateDeg}deg)`
                }}
                src={previewImage}
              />
            </div>
            <Row type="flex" justify="space-around" style={{
              marginTop: 25,
            }} >
              <Button onClick={this.handleRotate}>旋转</Button>
              <Button onClick={this.handleAmplification}>放大</Button>
              <Button onClick={this.handleNarrow}>缩小</Button>
            </Row>
          </Modal>

          <Modal
            title={"面签视频"}
            width={680}
            visible={this.state.videoVisible}
            footer={null}
            keyboard={true}
            onCancel={this.handleVidoeCancel}
          >
            <div className="clearfix">
              <DescriptionList col="2" size="large">
                <Description>
                  {
                    this.state.fileList.signVerifyVideo[0] == undefined ?
                      ""
                      :
                      <SublimeVideo loop style={style}
                        src={this.state.fileList.signVerifyVideo[0].url}
                      />
                  }
                </Description>
                <Description>
                  {
                    this.state.fileList.signVerifyVideo[1] == undefined ?
                      ""
                      :
                      <SublimeVideo loop style={style}
                        src={this.state.fileList.signVerifyVideo[1].url}
                      />
                  }
                </Description>
              </DescriptionList>
            </div>
          </Modal>

          <Modal
            title="电话回访"
            visible={this.state.modalVisible}
            keyboard={true}
            onOk={this.submitPhoneAccess}
            loading={savePhoneLoading}
            onCancel={this.handlePhoneCancel}>
            {this.renderDescription()}
            <Row >
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="回访日期">
                  <div>
                    <DatePicker
                      showTime                     
                      style={{ width: '100%' }}
                      format="YYYY-MM-DD HH:mm:ss"
                      defaultValue={returnVisitTime ? moment(returnVisitTime) : null}
                      onChange={this.handleChangeTime}
                      disabled={this.state.phoneReviewTow}
                    />
                  </div>
                </Description>
              </DescriptionList>
            </Row >
            <Row >
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description >
                  已向本人核实办理信用卡分期事宜：
                  <RadioGroup value={this.state.creditValue} onChange={this.onChangeCreditValue} disabled={this.state.phoneReviewTow}>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                  </RadioGroup>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description >
                  已向本人核实住宅地址：
                  <RadioGroup value={this.state.addRessValue} onChange={this.onChangeAddRessValue} disabled={this.state.phoneReviewTow}>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                  </RadioGroup>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description >
                  已向本人核实工作情况：
                 <RadioGroup value={this.state.homeWorkValue} onChange={this.onChangeHomeWorkValue} disabled={this.state.phoneReviewTow}>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                  </RadioGroup>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description >
                  已向本人核实有关共同借款人提供的身份证、购房合同等资料申请审批表上填写的信息：
                <RadioGroup value={this.state.idCardValue} onChange={this.onChangeIdCardValue} disabled={this.state.phoneReviewTow}>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                  </RadioGroup>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20, marginBottom: 20 }}>
              <DescriptionList col="1">
                <Description term="结论">
                  <Row>
                    <TextArea placeholder="请输入" rows={4} value={this.state.conclusionValue} onChange={this.onChangecConclusionValue} disabled={this.state.phoneReviewTow}/>
                  </Row>
                </Description >
              </DescriptionList>
            </Row>
          </Modal>
        </Row>
    );
  }
}
